<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>nav</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
	</head>
	<body>
		<!--
			标签页  胶囊是标签页 两端对齐的标签页 禁用的连接 添加下拉菜单
		-->
		<div class="container">
			<ul id="mytab" class="nav nav-tabs" role="tablist">
				<li role="presentation" class="active"><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
			</ul>
			<!--胶囊式的标签页 nav-pills-->
			<ul id="mytab" class="nav nav-pills" role="tablist">
				<li role="presentation" class="active"><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
			</ul>
			<!--胶囊式的标签页 nav-pills nav-stacked 垂直展示-->
			<ul id="mytab" class="nav nav-pills nav-stacked" role="tablist">
				<li role="presentation" class="active"><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
			</ul>
			<!--胶囊式的标签页  nav-justified 充满全屏 两端对齐  class="disabled" 禁用-->
			<ul id="mytab4" class="nav nav-pills nav-justified" role="tablist">
				<li role="presentation" class="active"><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
				<li role="presentation" class="disabled"><a href="#">你好呀!</a></li>
			</ul>
			<!--胶囊式的标签页 下拉菜单 nav-justified 充满全屏 两端对齐  class="disabled" 禁用-->
			<ul id="mytab4" class="nav nav-pills nav-justified" role="tablist">
				<li role="presentation" class="active"><a href="#">你好呀!</a></li>
				<li role="presentation" ><a href="#">你好呀!</a></li>
				<li role="presentation" class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">你好呀!
				<span class="caret"></span>
				</a>
				  <ul class="dropdown-menu" role="menu">
				  	<li role="presentation"><a role="menuitem" tabindex="-1">徐力辉1</a></li>
				  	<li role="presentation"><a role="menuitem" tabindex="-1">徐力辉2</a></li>
				  	<li role="presentation"><a role="menuitem" tabindex="-1">徐力辉3</a></li>
				  	<li role="presentation"><a role="menuitem" tabindex="-1">徐力辉4</a></li>
				  </ul>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
		<script type="text/javascript">
			$("#mytab a").click(function(e){
				e.preventDefault();
				$(this).tab("show");
			});
			$("#mytab4 a").click(function(e){
				e.preventDefault();
				$(this).tab("show");
			});
		</script>
	</body>
</html>
